<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="天地图" />
		<title>天地图－地图API－范例－画面</title>
		<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=67086d004b94f495f0251b5bcc1ef26d">
		</script>
		<style type="text/css">
			body,
			html {
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: "Microsoft YaHei"
			}

			#mapDiv {
				width: 100%;
				height: 100%
			}

			input,
			b,
			p {
				margin-left: 5px;
				font-size: 14px
			}
		</style>
		<script>
			var map;
			var zoom = 13;
			var polygon;
			//图层
			var lay;
			var layT;

			//地图放大
			function zoomToLarge() {
				map.zoomIn();
			}

			//地图缩小
			function zoomToSmall() {
				map.zoomOut();
			}

			//地图加载
			function onLoad() {

				//影像地图图层
				var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
					"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
					"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
					"&tk=67086d004b94f495f0251b5bcc1ef26d";

				// 影像注记url
				var imageURLT = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
					"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
					"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
					"&tk=67086d004b94f495f0251b5bcc1ef26d";

				//创建自定义图层对象
				lay = new T.TileLayer(imageURL, {
					minZoom: 1,
					maxZoom: 18
				});
				layT = new T.TileLayer(imageURLT, {
					minZoom: 1,
					maxZoom: 18
				});
				var config = {
					layers: [lay, layT]
				};

				//初始化地图对象
				map = new T.Map("mapDiv", config);
				//设置显示地图的中心点和级别
				map.centerAndZoom(new T.LngLat(116.40969, 39.94940), zoom);
				var points = [];
				points.push(new T.LngLat(116.41136, 39.97569));
				points.push(new T.LngLat(116.411794, 39.9068));
				points.push(new T.LngLat(116.32969, 39.92940));
				points.push(new T.LngLat(116.385438, 39.90610));
				//创建面对象
				polygon = new T.Polygon(points, {
					color: "blue",
					weight: 3,
					opacity: 0.5,
					fillColor: "#FFFFFF",
					fillOpacity: 0.5
				});
				//向地图上添加面
				map.addOverLay(polygon);
				polygon.enableEdit();

				JsFun.onMapLoadComplete();
			}
		</script>

		<style>
			.mapBG {
				height: 100vh;
				background:
					linear-gradient(to right, #F8F8FF 1px, transparent 1px),
					linear-gradient(to bottom, #F8F8FF 1px, transparent 1px);
				background-repeat: repeat;
				/* 默认为 repeat */
				background-size: 20px 20px;
			}
		</style>

	</head>
	<body onLoad="onLoad()">
		<div id="mapDiv" class="mapBG"></div>
	</body>
</html>
